<#include "/WEB-INF/template/common/macro/base.ftl"/>
<#include "/WEB-INF/template/common/macro/libs.ftl"/>
<#include "/WEB-INF/template/common/layout/l_admin.ftl"/>
<@adminLayout>
    <@breadcrumb view=breadcrumbView/>
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box light-grey">
            <div class="portlet-title">
                <div class="caption"><i class="fa fa-globe"></i>${breadcrumbView.getCurmenu().name!}</div>
                <div class="actions">
                    <button id="list_add" class="btn blue" data-toggle="modal">
                        <i class="fa fa-plus-circle"></i>
                        添加
                    </button>
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-toolbar">
                </div>
                <table class="table table-striped table-bordered table-hover" style="width:100%"
                       id="sample_1">
                    <thead>
                    <tr>
                        <th width="10%">节点ID</th>
                        <th width="10%">父节点ID</th>
                        <th width="15%">缩写</th>
                        <th width="15%">节点名称</th>
                        <th width="15%">URL</th>
                        <th width="10%">标志位</th>
                        <th width="10%">叶子节点</th>
                        <th width="15%">图标</th>
                        <th width="10%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                        <#list list as item>
                        <tr>
                            <td>${item.code}</td>
                            <td>${item.parentcode}</td>
                            <td>${item.encode}</td>
                            <td>${item.name}</td>
                            <td>${item.url}</td>
                            <td>${(item.liveflag==1)?string('有效','无效')}</td>
                            <td>${item.isleaf}</td>
                            <td><i class="fa ${item.uiicon} update"></i>-${item.uiicon}</td>
                            <td>
                                <a href="javascript:;" onclick="update(this,'${item.uuid}')"
                                   class="btn btn-primary btn-xs">
                                    <i class="fa fa-pencil update"></i>
                                </a>
                                <a href="javascript:;" onclick="deletebyid(this,'${item.uuid}')"
                                   class="btn btn-danger btn-xs">
                                    <i class="fa fa-minus-circle"></i>
                                </a>
                            </td>
                        </tr>
                        </#list>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
    </div>
    <!--model begin-->
    <@Modal_CURD "ajax_add" "modal-wide" "menu_add"/>
    <@Modal_CURD "ajax_update" "modal-wide" "menu_update"/>

    <@frameModel "select_menuTree"/>
    <@Modal_CURD "select_icon" "modal-full">
        <#include "/WEB-INF/template/page/admin/plugins/select_icon.ftl"/>
    </@Modal_CURD>
    <input type="hidden" name="hdn_selecticon"/>

    <@Modal_SystemOpera/>
    <!--model end-->
</div>
    <@script>
        <@libs_datatables/>
        <@libs_jquery_validate_js/>
    <script type="text/javascript">

        jQuery(document).ready(function () {
            $('#sample_1').dataTable({
                "sPaginationType": "bootstrap",
                "aLengthMenu": [[10, 20, -1], [10, 20, "所有"]],
                "iDisplayLength": 10
            });

            $("#sample_1_filter input[type='text']").addClass("form-control input-small");
            var addobj = $.extend(CONST_ACTION.ADD, {
                modaldom: $("#ajax_add"),
                actiondom: $("#list_add"),
                actionurl: "${CONTEXT_PATH}/m/menu/add",
                okevent: function (config) {
                },
                afterok:function(config){
                }
            });
            //Add action setting
            setFormAjaxAction(addobj);


            //初始化select icon的item单击事件
            //因为icon是静态加载,所以事件可以在menu_list.ftl中注册
            //注册图标单击事件；
            $("#select_icon").on("click", ".fa-item", {}, function () {
                $("#select_icon .fa-item").css("background", "#ffffff");
                $(this).css("background", "#eee");
                $("[name='hdn_selecticon']").val($(this).find("i").attr("class").replace("fa ", ""));
            });
            $("#select_icon").on("click", ".btn-primary", {}, function () {
                $("[name='m.uiicon']").val($("[name='hdn_selecticon']").val());
                $("#select_icon").modal("hide");
            });

        });
        function update(obj, id) {
            var updateobj = $.extend(CONST_ACTION.UPDATE, {
                modaldom: $("#ajax_update"),
                actiondom: $(obj),
                actionurl: "${CONTEXT_PATH}/m/menu/edit/" + id,
                okevent: function (config) {
                },
                afterok:function(config){
                }
            });
            //Update action setting
            updateEvent(updateobj);
        }
        function deletebyid(obj, id) {
            var cfg = $.extend(CONST_ACTION.DELETE, {
                actiondom: $(obj),
                actionurl: "${CONTEXT_PATH}/m/menu/delete/" + id
            })
            SystemConfirm(cfg)
        }

        /**
         *  在_menu_tree中有默认setting环境变量
         *  在初始化时会先调用父页面PageTreeSetting;
         */
        var PageTreeSetting = {
            callback: {
                onCheck: function (event, treeId, treeNode) {
                    $("[name='parentname']").val(treeNode.name);
                    $("[name='m.parentcode']").val(treeNode.id);
                }
            }
        };

        /**
         * 通过设置FrameSetting对象
         * 来初始化frame
         * @type {{url: string, callback: Function}}
         */
        var FrameSetting = {
            url: "${CONTEXT_PATH}/m/menu/tree",
            callback: function () {
            }
        };

    </script>
    </@script>
</@adminLayout>
